<template>
  <view class="customNav">
    <view class="navBg" v-if="bgColor && bgHeight" :style="{ background: bgColor, height: bgHeight }"></view>
    <view class="navBg" v-if="bgImage" :style="{ height: bgHeight }">
      <image :src="bgImage" mode="aspectFill"></image>
    </view>
    <view :style="{ ...navBarStyle, paddingTop: 0 }" v-if="isHeight"></view>
    <view class="nav" :style="{ ...navBarStyle, background: bgColor }">

      <view class="left">
        <slot name="left"></slot>
        <image :src="`/static/icons/${isBackWhite ? 'back1' : 'back'}.svg`" alt="" @click="goBack" v-if="isBack">
        </image>
      </view>

      <view class="title" v-if="title">
        {{ title }}
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onBeforeMount } from "vue";
defineProps({
  isBackWhite: {
    type: Boolean,
    default: false,
  },
  isBack: {
    type: Boolean,
    default: false,
  },
  isHeight: {
    type: Boolean,
    default: true,
  },
  iconColor: {
    type: String,
    default: "#00000",
  },
  bgHeight: {
    type: String,
    default: "",
  },
  bgImage: {
    type: String,
    default: "",
  },
  bgColor: {
    type: String,
    default: "",
  },
  title: String,
});
const navBarStyle = ref({
  height: "44px",
  paddingTop: "0px",
});
function goBack() {
  uni.navigateBack({
    delta: 1,
  });
}
onBeforeMount(() => {
  uni.getSystemInfo({
    success: (res) => {
      const statusBarHeight = res.statusBarHeight || 0;
      // 计算导航栏高度
      const navBarHeight = statusBarHeight + 44;
      // 设置导航栏样式
      navBarStyle.value = {
        height: `${navBarHeight}px`,
        paddingTop: `${statusBarHeight}px`,
      };
    },
  });
});
</script>
<style lang="scss" scoped>
.customNav {
  text-align: center;

  .navBg {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    height: 402rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 111;
    padding: 0 28rpx;
    box-sizing: border-box;

    .left {

      position: absolute;
      left: 28rpx;

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .title {
      font-size: 36rpx;
      color: #303133;
      line-height: 52rpx;
      text-align: center;
      width: 100%;
    }
  }
}
</style>